<!-- 个人中心：支持装修 -->
<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    :bgStyle="template.page"
    :navbarStyle="template.navigationBar"
    onShareAppMessage
  >
    <view class="s-category">
      <view class="s-category">
        <image
          class="bg-image"
          src="http://49.233.144.92:7791/i/2025/10/26/68fe398c8678f.jpg"
        />
        <view class="white-marks user-content">
          <s-block
            v-for="(item, index) in template.components"
            :key="index"
            :styles="item.property.style"
          >
            <s-block-item
              :type="item.id"
              :data="item.property"
              :styles="item.property.style"
            />
          </s-block>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { computed } from "vue";
import { onShow, onPageScroll, onPullDownRefresh } from "@dcloudio/uni-app";
import sheep from "@/sheep";

// 隐藏原生tabBar
uni.hideTabBar({
  fail: () => {},
});

const template = computed(() => sheep.$store("app").template.user);

onShow(() => {
  sheep.$store("user").updateUserData();
});

onPullDownRefresh(() => {
  sheep.$store("user").updateUserData();
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 800);
});
</script>

<style>
.s-category {
  background-image: url("http://49.233.144.92:7791/i/2025/10/26/68fe398c8678f.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.white-marks {
  position: absolute;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 2;
  width: 100%;
  top: 0;
  left: 0;
}

.user-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.s-category {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url("http://49.233.144.92:7791/i/2025/10/26/68fe398c8678f.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg-image {
  display: none;
}
</style>
